<template>
    <!-- 课程管理 -->
    <div class="scheme">
        <div class="header-box">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="选择门店：">
                    <el-select v-model="formInline.type" placeholder="请选择门店" clearable>
                        <el-option label="门店一" value="1"></el-option>
                        <el-option label="门店二" value="2"></el-option>
                    </el-select>
                </el-form-item>
                <!-- <el-form-item label="教练名称：">
                    <el-input v-model="formInline.content" placeholder="请输入教练名称"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="submitForm">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" icon="el-icon-plus" @click="addCourse">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="tables">
            <el-table border :data="tableData" height="730" highlight-current-row :row-style="{height: '20px'}"
                      :header-cell-style="{background:'#e6e6e6',color:'#000000'}">
                <el-table-column prop="id" align="center" label="序号" width="60">
                </el-table-column>
                <el-table-column prop="name" align="center" label="门店名称">
                </el-table-column>
                <el-table-column prop="phone" align="center" label="门店地址">
                </el-table-column>
                <!-- <el-table-column prop="image" align="center" label="所属校区">
                </el-table-column> -->

                <el-table-column prop="status" align="center" label="状态">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'"
                                disable-transitions>{{ scope.row.status === 1 ? '启用' : '禁止' }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="time" align="center" label="创建时间">
                </el-table-column>
                <el-table-column align="center" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" plain icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page.sync="page" :page-sizes="[15, 20, 50, 100]" :page-size="limit"
                               layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>
        </div>

        <!-- 新增课程弹框 -->
        <el-dialog :title="title" :visible.sync="dialogAddCourse" width="60%" :show-close="false"
                   :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form :model="form" label-width="10%">
                <el-form-item label="门店名称">
                    <el-input v-model="form.name" style="width: 60%;"></el-input>
                </el-form-item>
                <el-form-item label="所属小区：">
                    <el-select style="width: 120px;margin: 0 4px;" size="mini" v-model="form.type_id" placeholder="请选择" >
                        <el-option :label="item.name" :value="item.id" v-for="item in typeList" :key="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="客服电话:" prop="price">
                    <el-input v-model="form.phone" style="width: 200px;" placeholder="请输入电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-form-item label="地区">
                        <el-cascader

                            :options="options"
                            placeholder="请选择地区"
                            clearable

                            v-model="form.selectedOptions"
                            @change="handleChange">
                        </el-cascader>
                    </el-form-item>
                </el-form-item>

                <el-form-item label="地址:">
                    <el-input v-model="form.address" style="width: 360px;" placeholder="请输入地址"
                              @change="searchLocation">
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <p>经度：{{ form.lon }}</p>
                    <p>纬度：{{ form.lat }}</p>
                </el-form-item>
                <!-- <el-form-item label="排序">
                    <el-input-number v-model="form.order" :min="1" :max="10000"></el-input-number>
                </el-form-item> -->
                <el-form-item label="状态">
                    <el-switch v-model="form.status"></el-switch>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogAddCourse = false">取 消</el-button>
                <el-button type="primary" @click="submitCourseData">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor } from "vue-quill-editor";

import {
  regionData,
  CodeToText,
  TextToCode,
} from "element-china-area-data";

export default {
  name: "patient",
  data() {
    return {
      formInline: {
        type: "",
        content: "",
      },
      form: {
        name: "",
        type_id: "",
        phone: "",
        selectedOptions: [],
        address: "",
        lat: "",
        lon: "",
        status: false,
      },
      tableData: [
        {
          id: 1,
          name: "张三",
          phone: "13401230123",
          time: "2023-10-25 12:01:25",
          status: 1,
        },
        {
          id: 2,
          name: "李四",
          phone: "13401230123",
          time: "2023-10-25 12:01:25",
          status: 0,
        },
        {
          id: 3,
          name: "张三",
          phone: "13401230123",
          time: "2023-10-25 12:01:25",
          status: 1,
        },
        {
          id: 4,
          name: "王五",
          phone: "13401230123",
          time: "2023-10-25 12:01:25",
          status: 1,
        },
        {
          id: 5,
          name: "张三",
          phone: "13401230123",
          time: "2023-10-25 12:01:25",
          status: 0,
        },
        {
          id: 6,
          name: "李四",
          phone: "13401230123",
          time: "2023-10-25 12:01:25",
          status: 1,
        },
      ],
      dialogAddCourse: false, //默认新增课程弹框隐藏

      title: "新增门店", //默认新增

      isEdit: false, //默认为新增

      page: 1, //默认第一页
      limit: 15, //默认一页显示10条数据
      total: 0,

      lat: "",
      lon: "",

      typeList: [
        { id: 1, name: "体能课程" },
        { id: 2, name: "私教课程" },
        { id: 3, name: "体考课程" },
        { id: 4, name: "周末研学" },
      ],
      options: regionData,
      addForm:{
        province:'',
        county:'',
        area:''
      }
    };
  },

  created() {
    //    this.getCourseList();

    // this.getTypeList();
  },
  components: {
    quillEditor,
  },
  methods: {
    //省市区三级联动事件
    handleChange(value) {
        console.log(value,'获取id')
        // this.form.selectedOptions = value;
        // if(value){
        //     this.addForm.province = codeToText[value[0]];
        // console.log('省市区123',this.addForm.province)

        // this.addForm.county = CodeToText[this.form.selectedOptions[1]];
        // this.addForm.area = CodeToText[this.form.selectedOptions[2]];
        // console.log('省市区',this.addForm)
        // }

    //   this.form.selectedOptions = value;
    //   console.log(this.form.selectedOptions, "1111");
    //   var name = "";
    //   this.form.selectedOptions.map((item) => (name += CodeToText[item] + "")); //将省市区三个拼接一起
    //     console.log(name,'444')
    //     this.addtions.names = name;
    //     console.log(this.addtions.names,'2222');
    // //   运用了CodeToText把编码转成了中文
    //     this.addForm.province = CodeToText[this.form.selectedOptions[0]];
    //     this.addForm.county = CodeToText[this.form.selectedOptions[1]];
    //     this.addForm.area = CodeToText[this.form.selectedOptions[2]];

    //     console.log(this.addForm,'3333');
    },

    searchLocation() {},
    // searchLocation:lodash.debounce((event) => {
    //     that.getKwd(event);
    // }, 500),
    // 获取地图定位
    getKwd(event) {
      this.$jsonp("https://apis.map.qq.com/ws/place/v1/suggestion", {
        key: "QKFBZ-2WVW4-36EUP-FEWU7-AT7VV-XVFOP",
        output: "jsonp",
        keyword: event,
        region: "广州市",
      })
        .then((res) => {
          console.log(res);
          if (res.status === 0) {
            this.lon = res.data[0].location.lng;
            this.lat = res.data[0].location.lat;
          } else {
            this.lon = "0";
            this.lat = "0";
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    handleAvatarSuccess(res, file) {
      this.form.image = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      console.log("file.type", file.type);
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpeg、png或者gif格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 点击新增课程按钮
    addCourse() {
      this.title = "新增门店";
      this.dialogAddCourse = true;
      this.isEdit = false;
      this.form.name = "";
      this.form.code = "";
      this.form.desc = "";
      this.form.type = [];
      this.form.sort = "";
      this.form.status = false;
    },
    getTypeList() {
      let params = {
        status: 1,
        page: 1,
        per_page: 1000,
      };
      this.$get(this.$api.courseTypeApi, params).then((res) => {
        if (res.code == 200) {
          this.typeList = res.data.data;
        } else {
          return this.$message.error(res.msg);
        }
      });
    },
    getCourseList(page, limit) {
      let params = {
        page: page,
        per_page: limit,
      };
      this.$get(this.$api.courseApi, params).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.data;
          this.total = res.data.total;
        } else {
          return this.$message.error(res.msg);
        }
      });
    },

    // 点击编辑按钮
    handleEdit(row) {
      this.title = "编辑课程";
      this.gameId = row.id;
      this.form.name = row.name;
      this.form.code = row.code;
      this.form.desc = row.desc;
      this.form.type = row.type_id;
      this.form.sort = row.sort;
      this.form.status = row.status == 1 ? true : false;
      this.dialogAddCourse = true;
      this.isEdit = true;
    },
    // 点击编辑弹框取消按钮
    goToEdit() {
      this.dialogAddCourse = false;
      this.isEdit = false;
    },

    // 点击删除按钮
    handleDelete(row) {
      this.$confirm("此操作将永久删除该课程信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$delete(this.$api.courseApi + "/" + row.id).then((res) => {
            if (res.code == 200) {
              this.getCourseList(this.page, this.limit);
              return this.$message.success("删除成功！");
            } else {
              return this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 分页
    handleSizeChange(size) {
      this.limit = size;
      this.getCourseList(this.page, this.limit);
    },
    handleCurrentChange(index) {
      this.page = index;
      this.getCourseList(this.page, this.limit);
    },
    // 点击查询按钮
    submitForm() {
      this.getCourseList(this.page, this.limit);
    },

    // 提交课程数据确定按钮
    submitCourseData() {
      if (this.form.name == "") {
        return this.$message.error("请输入名称！");
      }
      if (this.form.code == "") {
        return this.$message.error("请输入代号！");
      }
      if (this.form.desc == "") {
        return this.$message.error("请输入说明！");
      }
      if (this.form.type.length == 0) {
        return this.$message.error("请选择类目！");
      }
      let params = {
        name: this.form.name,
        code: this.form.code,
        desc: this.form.desc,
        type_id: this.form.type,
        sort: this.form.sort,
        status: this.form.status == true ? 1 : 2,
      };
      if (this.isEdit) {
        this.$put(this.$api.courseApi + "/" + this.gameId, params).then(
          (res) => {
            if (res.code == 200) {
              this.form.name = "";
              this.form.code = "";
              this.form.desc = "";
              this.form.type = [];
              this.form.sort = "";
              this.form.status = false;
              this.dialogAddCourse = false;
              this.getCourseList(this.page, this.limit);
              return this.$message.success("编辑成功！");
            } else {
              return this.$message.error(res.msg);
            }
          }
        );
      } else {
        if (this.form.name == "") {
          return this.$message.error("请输入名称！");
        } else if (this.form.code == "") {
          return this.$message.error("请输入代号！");
        } else if (this.form.desc == "") {
          return this.$message.error("请输入说明！");
        } else if (this.form.type.length == 0) {
          return this.$message.error("请选择类目！");
        } else {
          this.$post(this.$api.courseApi, params).then((res) => {
            if (res.code == 200) {
              this.form.name = "";
              this.form.code = "";
              this.form.desc = "";
              this.form.type = [];
              this.form.sort = "";
              this.form.status = false;
              this.dialogAddCourse = false;
              this.getCourseList(this.page, this.limit);
              return this.$message.success("新增成功！");
            } else {
              return this.$message.error(res.msg);
            }
          });
        }
      }
    },
  },
};
</script>

<style scoped>
.pagination {
  text-align: center;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.is-selected {
  color: #1989fa;
}
</style>
